<template>
  <view class="background">
    <view class="container" v-for="(item,index) in teaCourses" :key="index">
      <view class="top-section">
        <view class="title">{{ item.courseName }}</view>
        <view class="vertical-line"></view> <!-- 添加竖线 -->
        <button class="button" @click="stuList(item.id)">查看</button>
      </view>
    </view>
  </view>
</template>

<script >
import teacher from "../../api/teacher";

export default {
  data() {
    return {
      teaCourses: [],

    }
  },
  onLoad() {
    this.teacherCourse()
  },
  methods: {
    //教师所授课程
    async teacherCourse() {
      try {
        const res = await teacher.teacherGetCourses()
        console.log('9798798798', res.data)
        this.teaCourses = res.data
      } catch (e) {
        return Promise.reject(e)
      }
    },

    //跳转课程学生名单
    async stuList(id) {
      uni.navigateTo({
        url: `/pages/myClass/courseStudentList?id=${id}`,
        success: function () {

        },
        fail: function (err) {
        }
      });
    }
  }
}
</script>
<style >
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: white;
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;
  align-items: center; /* 垂直居中 */
}


.container {
  border: 1px solid #cccccc;
  border-radius: 10px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  width: 90%;
  height: 40px; /* 调整高度以适应内容 */
  padding: 10px; /* 可选：添加内边距 */
  margin-top: 10px;
}

.top-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  flex: 1;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}


.vertical-line {
  width: 2px;
  height: 40px;
  background-color: #cccccc;
  margin: 0 20px;
}


.button {
  border: 0;
  color: #32f185;
  width: 150rpx;
  font-size: 14px;
  font-weight: bolder;
}
</style>